<template>
  <div demo-bg>
    <dv-scroll-board :config="con" style="width:590px;height:500px;font-size: 40px;" @mouseover="mouseoverHandler"
      @click="clickHandler" />
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';

const config1 = reactive({
  headerHeight: 40,
  headerBGC: '#040089',
  header: ['名称', '车次', '重量', '税费'],
  data: [
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1'],
    ['福祥石场', '98739', '1-4渣', '1']
  ],
  rowNum: 11,
  oddRowBGC: '#041134',
  evenRowBGC: '#011546'
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}
const formattedData = computed(() => ({
  ...config1,
  header: config1.header.map((row) => `<span style="font-size:30px;">${row}</span>`),
  data: config1.data.map((row) => row.map((cell) => `<span style="font-size:30px;">${cell}</span>`))
}))
const con = ref(formattedData.value)
</script>
<style lang="scss" scoped></style>